<template>
  <div>
    <van-nav-bar
      title="宠物信息"
      right-text="保存"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
  </div>
  <div class="AddPet-box">
    <img src="http://81.68.133.139:3000/images/addpet/petheart.png" alt="" />
  </div>
  <!-- 宠物昵称 -->
  <div class="addpet-name">
    <van-cell-group inset>
      <van-field
        v-model="count.name"
        label="昵称"
        placeholder="请填写宠物昵称"
      />
    </van-cell-group>
  </div>
  <!-- 宠物性别 -->
  <div class="addper-sex">
    <van-cell is-link title="性别 " @click="show = true" />
    <div class="sex-value">{{ sex }}</div>
    <van-action-sheet
      v-model:show="show"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancel"
      @select="onSelect"
    >
    </van-action-sheet>
  </div>
  <!-- 宠物品种 -->
  <div class="addper-Varieties">
    <van-cell-group inset>
      <van-field
        v-model="count.Varieties"
        label="品种"
        placeholder="请填写宠物品种"
      />
    </van-cell-group>
  </div>
  <!-- 出生时间 -->
  <div class="date-birth">
    <van-cell-group inset>
      <van-field
        v-model="count.timeDete"
        label="出生时期"
        placeholder="请选择宠物出生日期"
      />
    </van-cell-group>
  </div>
  <!-- 到家时间 -->
  <div class="date-gohome">
    <van-cell-group inset>
      <van-field
        v-model="count.gohome"
        label="到家时间"
        placeholder="请选择宠物到家时间"
      />
    </van-cell-group>
  </div>
  <!-- 绝育 -->
  <div class="sterilization">
    <van-cell-group inset>
      <van-field
        v-model="count.sterilization"
        label="绝育"
        placeholder="请填写绝育情况"
      />
    </van-cell-group>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { postUserAddPetsList } from "@/utils/api";
import { mapActions, mapState } from "vuex";
import { Toast } from "vant";
import { ref } from "vue";
export default {
  setup() {
    const count = ref({
      name: "",
      Varieties: "",
      timeDete: "",
      gohome: "",
      sterilization: "",
    });
    const router = useRouter();
    //  昵称
    const value = ref("");
    // 性别
    const sex = ref("");
    const show = ref(false);
    const actions = [{ name: "GG" }, { name: "MM" }];
    const onCancel = () => Toast("取消");
    const onSelect = (item) => {
      sex.value = item.name;
      show.value = false;
    };
    //保存添加宠物
    const onClickRight = async () => {
      // console.log(count.value.name);
      //添加宠物
      await postUserAddPetsList({
        uid: localStorage.getItem("userid"),
        pname: count.value.name,
        psex: true,
        pbreed: count.value.Varieties,
        pbirth: count.value.timeDete,
        parrive: count.value.gohome,
        pster: true,
      });
      router.push("/index/mine");
    };
    return {
      value,
      // 性别
      show,
      actions,
      onCancel,
      count,
      onSelect,
      sex,
      onClickRight,
    };
  },
  async created() {
    await this.getUerMinepets({ uid: localStorage.getItem("userid") });
  },
  computed: {
    ...mapState("mine", ["minepets"]),
  },
  methods: {
    ...mapActions("mine", ["getUerMinepets"]),
    onClickLeft() {
      this.$router.go(-1);
    },
    handleClick() {
      this.$router.push("/addpetvarieties");
    },
  },
};
</script>

<style lang="less">
.van-cell-group--inset {
  margin: 0 !important;
}
.van-nav-bar__left {
  .van-nav-bar__arrow {
    color: #ababab;
    font-size: 17px;
  }
}
.van-nav-bar__right {
  .van-nav-bar__text {
    color: #ababab;
    font-size: 17px;
    margin-right: 10px;
  }
}
.van-nav-bar__title {
  font-size: 17px;
  font-weight: 600;
}
.AddPet-box {
  width: 100%;
  height: 150px;
  background: #f7f7f7;
  img {
    width: 100px;
    height: 100px;
    margin-left: 150px;
    margin-top: 30px;
  }
}
// 宠物昵称
.addpet-name {
  width: 100%;
  height: 55px;
  border-bottom: 1px #f7f7f7 solid;

  .van-cell__title {
    color: #ababab;
    margin-top: 10px;
    font-size: 18px;
  }
  .van-field__control {
    margin-top: 10px;
    font-size: 16px;
  }
}
// 宠物性别
.addper-sex {
  width: 100%;
  height: 55px;
  border-bottom: 1px #f7f7f7 solid;
  position: relative;
  .sex-value {
    position: absolute;
    top: 14px;
    left: 180px;
    font-size: 19px;
    color: #ababab;
  }
  .van-cell__title {
    color: #ababab;
    margin-top: 10px;
    font-size: 18px;
  }
  .van-field__control {
    margin-top: 10px;
  }
}
// 宠物品种
.addper-Varieties {
  width: 100%;
  height: 55px;
  border-bottom: 1px #f7f7f7 solid;
  .van-cell__title {
    color: #ababab;
    margin-top: 10px;
    font-size: 18px;
  }
  .van-field__control {
    margin-top: 10px;
    font-size: 16px;
  }
}
// 出生时间
.date-birth {
  width: 100%;
  height: 55px;
  border-bottom: 1px #f7f7f7 solid;
  .van-cell__title {
    color: #ababab;
    margin-top: 10px;
    font-size: 18px;
  }
  .van-field__control {
    margin-top: 10px;
    font-size: 16px;
  }
}
// 到家时间
.date-gohome {
  width: 100%;
  height: 55px;
  border-bottom: 1px #f7f7f7 solid;
  .van-cell__title {
    color: #ababab;
    margin-top: 10px;
    font-size: 18px;
  }
  .van-field__control {
    margin-top: 10px;
    font-size: 16px;
  }
}
// 绝育
.sterilization {
  width: 100%;
  height: 55px;
  border-bottom: 1px #f7f7f7 solid;
  .van-cell__title {
    color: #ababab;
    margin-top: 10px;
    font-size: 18px;
  }
  .van-field__control {
    margin-top: 10px;
    font-size: 16px;
  }
}
</style>
